<template>
  <div class="content" @click="isShowGift=0">
    <div class="start-btn" v-show="!isStart" @click="start()">开始直播</div>
    <div class="start-live">
      <div class="top-nav">
        <div class="left">
          <span v-show="isStart" class="room-show">房间ID:{{live.roomid}}</span>
          <span v-show="isStart">{{live.online_person_count}}人在线 本次获得 OPS</span>
        </div>
        <div class="right">
          <img src="@/assets/img/live/camera.png" @click="switchCamera()">
          <img src="@/assets/img/live/close.png" @click="close()">
        </div>
      </div>
      <!-- <img
        src="@/assets/img/live/gift_icon.png"
        class="get-gift"
        v-show="isStart"
        @click.stop="isShowGift=1"
      >-->
      <live-chat :liveInfo="live" :sendMsg="send_msg"/>
      <!-- <live-gift v-show="isShowGift" :anchor="{}"/> -->
      <div class="bottom-nav" v-show="isStart">
        <div class="left">
          <span v-show="!showSend">
            <img src="@/assets/img/live/message_icon.png" @click="showSend=true">
          </span>
        </div>
        <div v-show="showSend" class="send-msg">
          <input v-model="send_msg.text" type="text" class="mesbox">
          <input type="button" value="发送" @click="sendMsg()" class="sendmes">
          &nbsp;
          <input type="button" value="返回" @click="showSend=false" class="backmes">
        </div>
        <div class="right" v-show="!showSend">
          <span @click="switchBeauty()">
            <img src="@/assets/img/live/beauty_selected.png" v-show="isBeauty">
            <img src="@/assets/img/live/beauty_not_selected.png" v-show="!isBeauty">
          </span>
          <span @click="switchWhitening()">
            <img src="@/assets/img/live/Whitening_selected.png" v-show="isWhitening">
            <img src="@/assets/img/live/Whitening_not_selected.png" v-show="!isWhitening">
          </span>
          <span @click="switchCut()">
            <img src="@/assets/img/live/cut_selected.png" v-show="isCut">
            <img src="@/assets/img/live/cut_not_selected.png" v-show="!isCut">
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html5plus from "../../utils/html5plus.js";
//import liveGift from "@/components/liveGift";
import liveChat from "@/components/liveChat";
import { getLiveInfo } from "../../api.js";
import { Toast, MessageBox } from "mint-ui";
import { getGuid } from "@/utils/index";
export default {
  name: "live_operate",
  data() {
    return {
      pusher: null,
      networkinfo: null,
      isStart: false,
      userInfo: null,
      live: {},
      userInfo2: null,
      gifts: [],
      showSend: false,
      isBeauty: false,
      isWhitening: false,
      isCut: false,
      send_msg: {
        text: "",
        send: false
      },
      isShowGift: false,
      style: null
    };
  },
  components: {
    liveChat
    // liveGift
  },
  mounted() {
    this.userInfo2 = JSON.parse(localStorage.userInfo2 || "false");
    if (!localStorage.zyUserId || !this.userInfo2) {
      MessageBox.confirm("去登录?").then(action => {
        this.$router.push("/login");
      });
      return;
    }
    this.style = document.createElement("style");
    this.style.setAttribute("type", "text/css");
    this.style.innerHTML =
      "html,body,div,div#app,*{background-color: transparent !important;}";
    document.body.appendChild(this.style);

    html5plus.plusready(
      () => {
        try {
          //获取直播数据
          getLiveInfo({
            accid: this.userInfo2.yx_user.yx_accid,
            machine_id: getGuid(),
            token: this.userInfo2.token,
            version: "H3.0.0"
          }).then(res => {
            if (res.data.code == 4040026) {
              //没有直播
              this.$router.push("/live/edit");
            } else if (res.data.code != 200) {
              Toast({
                message: res.data.msg,
                duration: 2000
              });
            } else {
              this.live = res.data.data[0];
              //               plus.webview.currentWebview().setStyle({
              //                 background: "transparent"
              //               });
              this.webview = plus.webview.create(
                "/livepusher.html",
                "live-operate",
                {
                  // background: 'transparent',
                  left: "0px",
                  bottom: "0px",
                  right: "0px",
                  top: "0px",
                  //width: document.documentElement.clientWidth + "px",
                  //height: document.documentElement.clientHeight + "px",
                  //      opacity: 0,
                  //      progress: null,
                  zindex: 10
                }
              );
              this.webview.show();
              // this.pusher = plus.video.getLivePusherById('livepusher');
              this.pusher = plus.video.createLivePusher("livepusher", {
                url: res.data.data[0].pushurl,
                //top: '0px',
                //left: '0px',
                //right: '0px',
                //bottom: '0px',
                position: "absolute"
              });
              this.webview.append(this.pusher);
            }
          });
        } catch (e) {
          MessageBox.alert(e.message);
        }
      },
      () => {
        MessageBox.alert("请下载APP进行直播！");
        this.$router.push("/");
      }
    );
  },
  methods: {
    start() {
      if (this.isStart) {
        return;
      }
      this.isStart = true;
      //获取直播数据
      // 				getLiveInfo({
      // 					"accid": this.userInfo2.yx_user.yx_accid,
      // 					machine_id: getGuid(),
      // 					"token": this.userInfo2.token,
      // 					"version": "H3.0.0"
      // 				}).then(res => {
      // 					if (res.data.code != 200) {
      // 						Toast({
      // 							message: res.data.msg,
      // 							duration: 2000
      // 						});
      // 					} else {
      // 						this.live = res.data.data[0];
      // 					}
      // 				});
      this.pusher.start(
        () => {
          //开始成功
          this.isStart = true;
        },
        () => {
          //开始失败
          MessageBox.alert("直播启动异常，请稍退出再启动！");
        }
      );
    },
    close() {
      this.isStart = false;
      this.pusher.stop(true);
      //后退页面
      // plus.webview.currentWebview().close();
      // plus.webview.getWebviewById('mainwebview').back();
      // 				var webviews = plus.webview.getTopWebview().getDisplayWebview(),
      // 					key = 0;
      // 				for (; key < webviews.length; key++) {
      // 					webviews[key].canBack(()=>{
      // 						webviews[key].back();
      // 					});
      // 				}
    },
    switchCamera() {
      this.pusher.switchCamera();
    },
    getGiftReceiveLists() {
      //获取受赠礼物
      //获取礼物列表
      getGiftReceiveLists({
        machine_id: getGuid(),
        token: this.userInfo2.token,
        version: "H3.0.0"
      }).then(res => {
        if (res.data.code == 200) {
        }
      });
    },
    switchBeauty() {
      this.isBeauty = !this.isBeauty;
      this.pusher.setStyles({
        beauty: this.isBeauty ? 1 : 0
      });
    },
    switchWhitening() {
      this.isWhitening = !this.isWhitening;
      this.pusher.setStyles({
        whiteness: this.isWhitening ? 2 : 0
      });
    },
    switchCut() {
      this.isCut = !this.isCut;
      //截屏处理
    },
    sendMsg() {
      this.send_msg.send = "text";
    }
  },
  destroyed() {
    document.body.removeChild(this.style);
    this.pusher && this.pusher.close();
    this.webview && this.webview.close();
    //     plus.webview.currentWebview().setStyle({
    //       background: "#FFFFFF"
    //     });
  }
};
</script>

<style lang="stylus" scoped>
.start-btn {
  width: 5rem;
  height: 0.8rem;
  color: white;
  font-size: 0.4rem;
  text-align: center;
  line-height: 0.8rem;
  position: absolute;
  bottom: 3rem;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #228FF8 !important;
}

.content {
  position: fixed;
  width: 100%;
  height: 100%;
}

.start-live {
  width: 100%;
  height: 100%;
}

.start-live .top-nav, .start-live .bottom-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #666666 !important;
}

.start-live .bottom-nav {
  top: auto;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

.start-live .bottom-nav .left {
  display: flex;
  justify-content: flex-start;
}

.start-live .bottom-nav .right {
  display: flex;
  justify-content: flex-end;
}

.start-live .top-nav .left, .start-live .top-nav .right {
  width: 45%;
}

.start-live .left .room-show:before, .start-live .left .room-show:after {
  content: '';
  display: inline-block;
  position: absolute;
  height: 100%;
  width: 0.4rem;
  background-color: #000000 !important;
  top: 0;
}

.start-live .left .room-show:before {
  left: -0.4rem;
}

.start-live .left .room-show:after {
  right: -0.4rem;
  border-radius: 0 50% 50% 0;
}

.start-live .top-nav .left span.room-show {
  height: 0.5rem;
  background-color: #000000 !important;
  display: inline-block;
  position: relative;
}

.start-live .top-nav .left span {
  display: block;
  color: white;
  font-size: 0.3rem;
  line-height: 0.5rem;
}

.start-live .top-nav .right {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.start-live .top-nav .right img {
  width: 0.8rem;
  margin: 0.1rem;
}

.start-live .bottom-nav img {
  width: 0.6rem;
  margin: 0.3rem;
}

.start-live .bottom-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1rem;
}

.get-gift {
  position: fixed;
  right: 0.3rem;
  bottom: 2rem;
  width: 1rem;
}

.send-msg {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
}

.send-msg .mesbox {
  background-color: #c7c5c5 !important;
  width: 4.4rem;
  border-radius: 20px;
  height: 0.6rem;
  padding: 0 2px;
  margin-left: 0.2rem;
  text-align: center;
}

.send-msg .sendmes {
  width: 1.2rem;
  height: 0.6rem;
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.6rem;
  border-radius: 21px;
  margin: auto;
  background-color: #228ff8 !important;
}

.send-msg .backmes {
  width: 1.2rem;
  height: 0.6rem;
  color: #c5b1b1;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.6rem;
  border-radius: 21px;
  margin: auto;
  background-color: #828282 !important;
}
</style>
